<template>
  <view>
    <view class="order-index" ref="container">
     <view class="header acea-row">
       <navigator class="item" :url="`/pages/admin/orderList/index?status=0&merId=${mer_id}`" hover-class="none">
         <view class="num">{{ census.pendingPayment }}</view>
         <view>待付款</view>
       </navigator>
       <navigator class="item" :url="`/pages/admin/orderList/index?status=1&merId=${mer_id}`" hover-class="none">
         <view class="num">{{ census.pendingDelivery }}</view>
         <view>待发货</view>
       </navigator>
       <navigator class="item" :url="`/pages/admin/orderList/index?status=4&merId=${mer_id}`" hover-class="none">
         <view class="num">{{ census.waitingReceipt }}</view>
         <view>待收货</view>
       </navigator>
     		
     </view>
	 <view class="header acea-row"  style="margin-top:-120rpx">
	  
		<navigator class="item" :url="`/pages/admin/orderList/index?status=3&merId=${mer_id}`" hover-class="none">
		  <view class="num">{{ census.writeoff }}</view>
		  <view>待核销</view>
		</navigator>
		<navigator class="item" :url="`/pages/admin/orderList/index?status=7&merId=${mer_id}`" hover-class="none">
		  <view class="num">{{ census.cleared }}</view>
		  <view>已取消</view>
		</navigator>
	   <navigator class="item" :url="`/pages/admin/orderList/index?status=9&merId=${mer_id}`" hover-class="none">
	     <view class="num">{{ census.completed }}</view>
	     <view>已完成</view>
	   </navigator>
	 </view>
      <view class="wrapper">
        <view class="title">
          <span class="iconfont icon-shujutongji"></span>数据统计
        </view>
        <view class="list acea-row">
          <navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=today&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.todayOrderAmount ? orderData.todayOrderAmount : 0}}</view>
            <view>今日成交额</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=month&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.monthOrderAmount ? orderData.monthOrderAmount : 0}}</view>
            <view>本月成交额</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=today&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.todayOrderCount ? orderData.todayOrderCount : 0}}</view>
            <view>今日订单数</view>
          </navigator>
          <navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=month&merId=${mer_id}`" hover-class="none">
            <view class="num">{{ orderData.monthOrderCount ? orderData.monthOrderCount : 0}}</view>
            <view>本月订单数</view>
          </navigator>
        </view>
      </view>
      <view class="public-wrapper">
        <view class="title">
          <span class="iconfont icon-xiangxishuju"></span>详细数据
        </view>
        <view class="nav acea-row row-between-wrapper">
          <view class="data">日期</view>
          <view class="browse">订单数</view>
          <view class="turnover">成交额</view>
        </view>
        <view class="conter">
			<block>
          <view class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
            <view class="data">{{ item.day }}</view>
            <view class="browse">{{ item.orderNum }}</view>
            <view class="turnover">{{ item.goodsAmount }}</view>
          </view>
		  </block>
		  <block>
			<!-- <rf-empty info="暂无站点帮助" v-if="list.length === 0 && !loading"></rf-empty> -->
			 			<no-data :list="list" text="暂无的数据"></no-data>
		  </block>
        </view>
			
			
      </view>
      <Loading :loaded="loaded" :loading="loading"></Loading>
    </view>
  </view>
</template>

<script>

import {
  getStatisticsInfo,
  getStatisticsMonth,
  orderStatistics,
  orderStatisticsJoin,
  orderPrice,
  orderPriceJoin
} from "@/utils/api/admin";
export default {
  name: 'adminOrder',
  components: {
  },
  data() {
    return {
      census: {},
      orderData: {
        today: {},
        yesterday: {},
        month: {}
      },
      list: [],
      where: {
        page: 1,
        limit: 15
      },
      loaded: false,
      loading: false,
      mer_id: '',
    }
  },
  onLoad(options) {
	  	  console.log("options", options)
	  this.mer_id = options.mer_id

	  this.getOrderStatistics(this.mer_id);
	  this.getList(this.mer_id)
  },
  methods: {
    getIndex: function() {
      var that = this;
      getStatisticsInfo().then(
        res => {
          that.census = res.data;
        },
        err => {
          that.Tips({
            title: err.msg
          })
        }
      );
    },
    getList: function(mer_id) {
      var that = this;
      if(that.loading || that.loaded) return;
      that.loading = true;
      orderPriceJoin(that.where, mer_id).then(
        res => {
			console.log("res", res)
          that.loading = false;
          that.loaded = res.data.list.length < that.where.limit;
          that.list.push.apply(that.list, res.data.list);
          that.where.page = that.where.page + 1;
        },
        error => {
          that.Tips({
            title: error.msg
          })
        },
        300
      );
    },
    getOrderStatistics: function(mer_id) {
      let that = this;
      orderStatisticsJoin(mer_id).then(
        res => {
          that.census = res.data.shopStatisticsOrder;
          that.orderData = res.data.shopDayStatistics;
        },
        err => {
          that.Tips({
            title: err.msg
          })
        }
      );
    }
  },
  onReachBottom() {
    this.getList(this.mer_id)
  }
}
</script>

<style lang="scss">
.popupn {
  position: fixed;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: transparent;
  height: 90rpx;
  line-height: 90rpx;
  z-index: 100;
  .spin {
    display: block;
    transform: rotate(180deg);
    font-size: 36rpx;
  }
  .title {
    max-width: 560rpx;
    margin: 0 auto;
    position: relative;
    display: inline;
    padding: 10rpx 30rpx 10rpx 50rpx;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 30rpx;
    color: #fff;
  }
  .iconfont {
    display: inline-block;
    position: relative;
    top: 4rpx;
    right: 0;
  }
  .mer_logo {
    width: 34rpx;
    height: 34rpx;
    position: relative;
    top: 6rpx;
    right: 10px;
  }
  .mer_name {
    display: inline-block;
    max-width: 650rpx;
  }
  .invoice-content {
    background-color: #ffffff;
  }
}
/*订单首页*/
.order-index .header {
  background-image: url("");
  background-size: 100% 100%;
  width: 100%;
  height: 280upx;
  padding: 40upx 3upx 0 3upx;
  box-sizing: border-box;
}

.order-index .header .item {
  flex: 1;
  -webkit-flex: 1;
  -o-flex: 1;
  -ms-flex: 1;
  text-align: center;
  font-size: 24upx;
  color: #fff;
}

.order-index .header .item .num {
  font-size: 40upx;
  margin-bottom: 7upx;
  height: 60rpx;
}

.order-index .wrapper {
  width: 690upx;
  background-color: #fff;
  border-radius: 10upx;
  margin: -115upx auto 0 auto;
  padding-top: 25upx;
}

.order-index .wrapper .title {
  font-size: 30upx;
  color: #282828;
  padding: 0 30upx;
  margin-bottom: 40upx;
}

.order-index .wrapper .title .iconfont {
  color: #2291f8;
  font-size: 40upx;
  margin-right: 13upx;
  vertical-align: middle;
}

.order-index .wrapper .list .item {
  width: 33.33%;
  text-align: center;
  font-size: 24upx;
  color: #999;
  margin-bottom: 45upx;
}

.order-index .wrapper .list .item .num {
  font-size: 40upx;
  color: #333;
}

.public-wrapper .title {
  font-size: 30upx;
  color: #282828;
  padding: 0 30upx;
  margin-bottom: 20upx;
}

.public-wrapper .title .iconfont {
  color: #2291f8;
  font-size: 40upx;
  margin-right: 13upx;
  vertical-align: middle;
}

.public-wrapper {
  margin: 18upx auto 0 auto;
  width: 690upx;
  background-color: #fff;
  border-radius: 10upx;
  padding-top: 25upx;
}

.public-wrapper .nav {
  padding: 0 30upx;
  height: 70upx;
  line-height: 70upx;
  font-size: 24upx;
  color: #999;
}

.public-wrapper .data {
  width: 210upx;
  text-align: left;
}

.public-wrapper .browse {
  width: 192upx;
  text-align: right;
}

.public-wrapper .turnover {
  width: 227upx;
  text-align: right;
}

.public-wrapper .conter {
  padding: 0 30upx;
}

.public-wrapper .conter .item {
  border-bottom: 1px solid #f7f7f7;
  height: 70upx;
  font-size: 24upx;
}

.public-wrapper .conter .item .turnover {
  color: #d84242;
}
</style>
